<%--
  Created by IntelliJ IDEA.
  User: 王元元
  Date: 2021/9/17
  Time: 11:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册页面</title>
    <script type="text/javascript" src="/static/js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="/commons/css/register.css">
</head>
<body>
<div class="divright">
    <div class="login">
        <h2>用户注册</h2>
        <form action="/user.do" method="post">
            <table>
                <div class="login_box">
                    <tr>
                        <td>
                            <input class="input" type="text" name="username" id="username" required />
                            <label class="label" id="label1">用户名</label>
                        </td>
                    </tr>
                </div>
                <div class="login_box">
                    <tr>
                        <td>
                            <input class="input" type="password" name="password" id="password" required="required" />
                            <label class="label" id="label2">密码</label>
                        </td>
                    </tr>
                </div>
                <div>
                    <tr>
                        <td>
                            <input class="input" type="email" name="email" id="email" />
                            <label class="label" id="label3">电子邮箱</label>
                        </td>
                    </tr>
                </div>
                <a href="javascript:void(0)" class="btn-register">
                    <input class="register-btn" type="submit" value="立即注册" name="sub" id="sub" disabled style="background: rgba(0,0,0,0);border: 0;
         color: #f7ae10;">
                    <input type="hidden" name="method" value="register">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </table>
        </form>
    </div>
</div>
<form action="/user.do" method="post">
</form>
<script>
    $(function () {
        let flag1 = false;
        let flag2 = false;
        let flag3 = false;

        //1.验证用户名是否存在
        $("#username").change(function () {
            $.getJSON("/user.do",{username:$(this).val(),method:"checkUserName"},function (resp) {
                if(resp){
                    $("#username").next().html("用户名可以使用");
                    flag1=true;
                }else{
                    $("#username").next().html("用户名不可以使用");
                    flag1=false;
                }
                //如果username为空则提示信息消失
                if($("#username").val()==""){
                    $("#username").next().html("用户名");
                    flag1=false;
                }
                //判断立即注册的显示
                if (flag1 && flag2 &&flag3) {
                    $("#sub").removeAttr("disabled");
                } else {
                    $("#sub").attr("disabled", "disabled");
                }
            })
        })
        // 2.验证有邮箱是否被使用
        $("#email").change(function () {
            $.getJSON("/user.do",{email:$(this).val(),method:"checkEmail"},function (resp) {
                if(resp){
                    let val = $("#email").val();
                    let reg = new RegExp(/[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}/);
                    let b = reg.test(val);
                    if(b){
                        $("#email").next().html("邮箱可以使用");
                        flag2=true;
                    }else{
                        $("#email").next().html("邮箱输入格式错误");
                        flag2=false;
                    }
                }else{
                    $("#email").next().html("邮箱不可以使用");
                    flag2=false;
                }
                //如果email为空则提示信息消失
                if($("#email").val()==""){
                    $("#email").next().html("邮箱");
                    flag2=false;
                }
                //判断立即注册的显示
                if (flag1 && flag2 && flag3) {
                    $("#sub").removeAttr("disabled");
                } else {
                    $("#sub").attr("disabled", "disabled");
                }
            })
        })
        // 3.验证密码是输入
        $("#password").change(function () {
            $.getJSON("/user.do",{password:$(this).val(),method:"checkPassword"},function () {
                if($("#password").val()===null){
                    $("#password").next().html("密码不能为空");
                    flag3=false;
                }else{
                    let val = $("#password").val();
                    let reg = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/);
                    let b = reg.test(val);
                    if(b){
                        $("#password").next().html("密码可以使用");
                        flag3=true;
                    }else{
                        $("#password").next().html("密码至少包含 数字和英文，长度6-20");
                        flag3=false;
                        //如果email为空则提示信息消失
                        if($("#password").val()==""){
                            $("#password").next().html("密码");
                            flag3=false;
                        }
                    }
                }
                //判断立即注册的显示
                if (flag1 && flag2 && flag3) {
                    $("#sub").removeAttr("disabled");
                } else {
                    $("#sub").attr("disabled", "disabled");
                }
            })
        })
    })
</script>
</body>
</html>
